<template>
  <!--头部-->
  <div class="topbox">
    <!--logo-->
    <div class="logo"><img src="../../assets/images/hdxylogonew.png" alt="logo" style="width:300px;"/></div>
    <!-- 搜索 -->
    <div>
      <el-input
        placeholder="请输入检索关键词"
        v-model="searchVal" clearable>
        <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
      </el-input>
    </div>

  </div>
  <!-- top end -->
</template>

<script>
export default {
  name: 'topIndex',
  data () {
    return {
      searchVal: ''
    }
  },
  methods: {
    search () {
      if (!this.searchVal) {
        alert('请输入关键词')
        return
      }
      console.log('这是提交查询事件')
    }
  }
}
</script>

<style scoped>


.topbox {
  width: 1220px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 150px;
}


.logo {
  float: left;
  /*width: 70%;*/
}

.el-input {
  float: left;
  width: 280px;
}

.el-button {
  margin-left: -2px;
  z-index: 10;
}
</style>
